// React中的状态提升 (第一个版本)
/*
    react 经常会遇到几个组件需要共用状态数据的情况，这时我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。
*/

import React, {Component} from 'react';
import './Calculator.css';

// 先创建一个名为 BoilingVerdict 的组件。它会接受 celsius 这个温度变量作为它的 prop 属性，最后根据温度判断返回内容：
function BoilingVerdict(props) {
    if (props.celsius >= 100) {
      return <p>水会烧开</p>;
    }
    return <p>水不会烧开</p>;
}
// Calculator组件会渲染一个 <input> 来接受用户输入，然后将输入的温度值保存在 this.state.temperature 当中。
// 它会根据输入的值渲染出 BoilingVerdict 组件。
class Calculator extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {temperature: '0'};
    }

    handleChange(e) {
        this.setState({temperature: e.target.value});
    }

    render() {
        const temperature = this.state.temperature;
        return (
            <fieldset className="main">
                <legend>(状态提升第一个版本)输入一个摄氏温度</legend>
                <input
                    value={temperature}
                    onChange={this.handleChange}
                />
                <BoilingVerdict celsius={parseFloat(temperature)} />
            </fieldset>
        );
    }
}

export default Calculator;